<template>
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
      <g style="cursor:pointer" stroke-width="3">
        <line class="li" @click="bian" x1="10" y1="10" x2="180" y2="10" style="stroke:black;">

        </line>

        <line class="li" @click="bian" x1="180" y1="10" x2="350" y2="10" style="stroke:pink;"></line>
        <line class="li" @click="bian" x1="10" y1="60" x2="180" y2="60" style="stroke:blue;"></line>
        <line class="li" @click="bian" x1="350" y1="60" x2="490" y2="60" style="stroke:#d9e0eb;"></line>
        <line class="li" @click="bian" x1="180" y1="60" x2="350" y2="60" style="stroke:red;"></line>
        <line class="li" @click="bian" x1="10" y1="100" x2="180" y2="100" style="stroke:yellow;"></line>
        <line class="li" @click="bian" x1="180" y1="100" x2="350" y2="60" style="stroke:rebeccapurple;"></line>
        <line class="li" @click="bian" x1="350" y1="10" x2="350" y2="60" style="stroke:gray;"></line>
        <!-- 车 -->
        <rect id="zhuYe3-2bb" @click="che" :x="x" :y="y" width="30" height="20"
          style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
        <!-- 文字 -->
        <text id="zhuYe3-2bd" @click="che" :x="x + 15" :y="y + 15" text-anchor="middle" font-size="10">高5312次列车</text>
        <!-- 弹框 -->
        <rect id="zhuYe3-2b" @click="che" :x="x + 20" :y="y + 35" width="80" height="80"
          style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
        <text id="zhuYe3-2bc" @click="che" :x="x + 40 + 15" :y="y + 40 + 25" text-anchor="middle"
          font-size="10">高5312次列车</text>
      </g>

    </svg>

    <button @click="che" class="bt">开始跑</button>
    <button class="bt" @click="hui">回去
    </button>
  </div>
</template>

<script>
export default {

  name: 'DomeAboutView',

  data () {
    return {
      x: 50,
      y: 80
    }
  },

  mounted () {
    window.onload = function () {
      const oDiv1 = document.getElementById('zhuYe3-2b')
      const oDiv2 = document.getElementById('zhuYe3-2bb')
      const oDiv3 = document.getElementById('zhuYe3-2bc')
      const oDiv5 = document.getElementById('zhuYe3-2bd')
      oDiv2.onmouseover = function () {
        console.log(1111)
        oDiv1.style.display = 'block'
        oDiv3.style.display = 'block'
      }
      oDiv5.onmouseover = function () {
        console.log(1111)
        oDiv1.style.display = 'block'
        oDiv3.style.display = 'block'
      }
      oDiv2.onmouseout = function () {
        oDiv1.style.display = 'none'
        oDiv3.style.display = 'none'
      }
      oDiv5.onmouseout = function () {
        oDiv1.style.display = 'none'
        oDiv3.style.display = 'none'
      }
    }
  },

  methods: {
    bian () {
      console.log('点击了')
      const btns = document.querySelectorAll('.li')
      const btnsa = document.querySelectorAll('.lis')
      console.log(btns)
      let i = 0
      for (i = 0; i < btns.length; i++) {
        btns[i].onclick = function () {
          for (i = 0; i < btns.length; i++) {
            console.log(btns[i]) // 首先清空所有元素的样式
            // btns[i].style.stroke = '#d9e0eb'
          }
          this.style.stroke = 'orange'// 当点击时，设置自己想要的样式
        }
      }
      let is = 0
      for (is = 0; is < btnsa.length; is++) {
        btns[is].onclick = function () {
          for (is = 0; is < btnsa.length; is++) {
            console.log(btns[is]) // 首先清空所有元素的样式
            btns[is].style.stroke = 'red'
          }
          this.style.stroke = 'pink'// 当点击时，设置自己想要的样式
        }
      }
    },
    che () {
      if (this.x <= 350 && this.y <= 100 && this.y > 40) {
        const time = setInterval(() => {
          this.x += 6

          if (this.x >= 180) {
            console.log(1111)
            this.x += 5
            this.y += -2.5
            console.log(this.y)
          }
          if (this.x >= 360) {
            console.log(222)

            console.log(this.y)
            alert('武汉站到了')
            clearInterval(time)
          }
          // clearInterval(time)
          // if (this.x >= 480) {

          // }
        }, 100)

        // clearInterval(time)
      }

      // alert('车来了')
    },
    hui () {
      if (this.x >= 350) {
        // eslint-disable-next-line no-var
        var times = setInterval(() => {
          this.x -= 5
          if (this.x <= 240 && this.x >= 235) {
            alert('汉口站到了')
          }
          if (this.x <= 50) {
            alert('高5312次列车到十堰站')
            this.x = 50
            this.y = 80
            clearInterval(times)
          }
        }, 100)
      }
    }
  }
}
</script>

<style lang="css" scoped>
div {
  width: 100%;
  height: 400px;

}

#zhuYe3-2b {
  display: none;
}

#zhuYe3-2bc {
  display: none;
}

.bt {
  position: relative;
  top: -300px;
  left: 200px;
}
</style>
